<template>
    <div class="pie">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"  >
            <circle cx="16" cy="16" r="16" stroke-dasharray="20 100" fill="lightskyblue" stroke="lightseagreen"></circle>
            <circle cx="16" cy="16" r="16" stroke-dasharray="40 100" stroke-dashoffset="-20" fill="transparent" stroke="lightgoldenrodyellow"></circle>
            <circle cx="16" cy="16" r="16" stroke-dasharray="10 100" stroke-dashoffset="-60" fill="transparent" stroke="gold"></circle>
            <circle cx="16" cy="16" r="16" stroke-dasharray="10 100" stroke-dashoffset="-70" fill="transparent" stroke="orange"></circle>
        </svg>
    </div>
</template>
<script setup>
</script>
<style scoped>
svg{
    background-color: lightskyblue;
    border-radius: 50%;
    transform:rotate(-90deg);
}
circle{
    stroke-width: 32;
}
.pie{
    width: 100px;
    height: 100px;
}
</style>